// 立即执行函数
/* 放大镜START */
(function () {
    //小盒子 中盒子 大盒子 约定
    const small = document.querySelector('.small_box')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')

    //鼠标移入到小图片，在中盒子中显示对应的图片
    //事件委托
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName == 'IMG') {
        middle.children[0].src = e.target.src;
        //排它
        const active = small.querySelector('ul li.active')
        active.classList.remove('active')
        e.target.parentNode.classList.add('active')
      }
    })

    let timerId = 0
    //鼠标移入中盒子，显示大盒子.
    const layer = middle.children[1]
    middle.addEventListener('mouseenter', function () {
      //显示大盒子
      clearTimeout(timerId);
      large.style.backgroundImage = `url("${middle.children[0].src}")`
      large.style.display = 'block'
      //显示遮罩层
      layer.style.display = 'block'
    })


    //鼠标离开中盒子，300毫秒后，大盒子隐藏
    middle.addEventListener('mouseleave', function () {
      timerId = setTimeout(function () {
        large.style.display = 'none'
      }, 300)
      //显示遮罩层
      layer.style.display = 'none'
    })

    //鼠标进入大盒子 计时器停止
    large.addEventListener('mouseenter', function () {
      clearTimeout(timerId)
    })

    //鼠标离开大盒子 计时器开始
    large.addEventListener('mouseleave', function () {
      timerId = setTimeout(function () {
        large.style.display = 'none'
      }, 300)
    })

    middle.addEventListener('mousemove', function (e) {
      // 鼠标在黑色遮罩的中间位置
      let x = e.offsetX - layer.offsetWidth / 2
      let y = e.offsetY - layer.offsetHeight / 2
      // 限定黑色遮罩盒子在中间位置不移动出去
      const maxX = middle.offsetWidth - layer.offsetWidth
      const maxY = middle.offsetHeight - layer.offsetHeight
      x = x < 0 ? 0 : x
      x = x > maxX ? maxX : x
      y = y < 0 ? 0 : y
      y = y > maxY ? maxY : y
      // 让黑色遮罩盒子移动
      layer.style.top = y + 'px'
      layer.style.left = x + 'px'
      //  大盒子图片移动
      large.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`

    })

  })();
/* 放大镜END */

const bkbj = []
bkbj.push(document.querySelectorAll('.bkbj')[0])
window.onload = function() {
    let bkData = [
        {
            ad_name:'临江轩（水天一色）',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'压江亭',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'挹翠亭',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'赣风堂西',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'假山广场',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'一进（千里逢迎）',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'二进',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'熏风南来',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'熏风亭',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'赣风堂东（赣风鄱韵）',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'东净轩',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'抱厦',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'寿山石',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'九曲桥',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'南生态园',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'12米高台',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'千禧钟',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'千禧钟回廊',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'太极广场',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'南长廊（滕王阁序印谱）',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        },
        {
            ad_name:'北长廊（滕王阁诗词集锦）',
            img_url:'./images/main_box.png',
            video:'//player.bilibili.com/player.html?isOutside=true&aid=716376829&bvid=BV1JX4y1P7t1&cid=362429042&p=1',
            t1:'./images/atlas/atas_box.jpg',
            t2:'./images/atlas/atas_box.jpg',
            t3:'./images/atlas/atas_box.jpg',
            t4:'./images/atlas/atas_box.jpg',
            t5:'./images/atlas/atas_box.jpg',
            t6:'./images/atlas/atas_box.jpg',
            t7:'./images/atlas/atas_box.jpg'
        }
    ]

    let bk_box = document.querySelector('.bk_big_box')
    
    let code = ''

    bkData.forEach((item,index) => {
        bk_box.innerHTML += 
        `
        <!-- 滕王阁板块-隔断START -->
        <div class="small_partition_box  bkbj">
            <div class="small_partition">
                <h1>
                    <span class="span">
                        <i class="i">${item.ad_name}
                            <img class="img" src="./images/logo2.png">
                        </i>
                    </span>
                </h1>
            </div>
        </div>
        <!-- 滕王阁板块-隔断END -->
        <!-- 板块START -->
        <div class="bk">
            <ul>
                <li>
                    <iframe src="${item.video}&autoplay=0"
                    scrolling="no" 
                    border="0" 
                    frameborder="no" 
                    framespacing="0" 
                    allowfullscreen="true"
                    width="100%"
                    height="100%"
                    ></iframe>
                </li>
                <li>
                    <div class="bk_box">
                        <img src="${item.t1}" width="100%" alt="">
                        <span>《图1》</span>
                    </div>
                    <div class="bk_box">
                        <img src="${item.t2}" width="100%" alt="">
                        <span>《图2》</span>
                    </div>
                </li>
                <li>
                    <div class="bk_lbox">
                        <img src="${item.t3}" width="100%" alt="">
                        <span>《图3》</span>
                    </div>
                </li>
                <li>
                    <div class="bk_box">
                        <img src="${item.t4}" width="100%" alt="">
                        <span>《图4》</span>
                    </div>
                    <div class="bk_box">
                        <img src="${item.t5}" width="100%" alt="">
                        <span>《图5》</span>
                    </div>
                </li>
                <li>
                    <div class="bk_box">
                        <img src="${item.t6}" width="100%" alt="">
                        <span>《图6》</span>
                    </div>
                    <div class="bk_box">
                        <img src="${item.t7}" width="100%" alt="">
                        <span>《图7》</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 板块END -->
        `

        bkbj.push(document.querySelectorAll('.bkbj')[index+1])
    })
}

/* 地图跳转 START */
//给地图上的点注册点击事件
const dt_btn = document.querySelectorAll('.twg ul li')
for (let i = 0; i < dt_btn.length; i++) {
    dt_btn[i].addEventListener('click', function () {
        console.log(bkbj[i].offsetTop)
        // document.documentElement.scrollTop = bkbj[i].offsetTop - XF_DingBu.offsetHeight
        if(i === 0){
            document.documentElement.scrollTop = (i+1)*700 + 1082 - XF_DingBu.offsetHeight
        }else{
            document.documentElement.scrollTop = (i+1)*700 + 1782 - XF_DingBu.offsetHeight
        }
    })
}
/* 地图跳转 END */